<template>
  <ComponentContainerProperty v-model="formData.style">
    <el-form label-width="80px" :model="formData">
      <el-card header="商品列表" class="property-group" shadow="never">
        <SpuShowcase v-model="formData.spuIds" />
      </el-card>
      <el-card header="商品样式" class="property-group" shadow="never">
        <el-form-item label="布局" prop="type">
          <el-radio-group v-model="formData.layoutType">
            <el-tooltip class="item" content="单列大图" placement="bottom">
              <el-radio-button value="oneColBigImg">
                <Icon icon="fluent:text-column-one-24-filled" />
              </el-radio-button>
            </el-tooltip>
            <el-tooltip class="item" content="单列小图" placement="bottom">
              <el-radio-button value="oneColSmallImg">
                <Icon icon="fluent:text-column-two-left-24-filled" />
              </el-radio-button>
            </el-tooltip>
            <el-tooltip class="item" content="双列" placement="bottom">
              <el-radio-button value="twoCol">
                <Icon icon="fluent:text-column-two-24-filled" />
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称" prop="fields.name.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.name.color" />
            <el-checkbox v-model="formData.fields.name.show" />
          </div>
        </el-form-item>
        <el-form-item label="商品简介" prop="fields.introduction.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.introduction.color" />
            <el-checkbox v-model="formData.fields.introduction.show" />
          </div>
        </el-form-item>
        <el-form-item label="商品价格" prop="fields.price.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.price.color" />
            <el-checkbox v-model="formData.fields.price.show" />
          </div>
        </el-form-item>
        <el-form-item label="市场价" prop="fields.marketPrice.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.marketPrice.color" />
            <el-checkbox v-model="formData.fields.marketPrice.show" />
          </div>
        </el-form-item>
        <el-form-item label="商品销量" prop="fields.salesCount.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.salesCount.color" />
            <el-checkbox v-model="formData.fields.salesCount.show" />
          </div>
        </el-form-item>
        <el-form-item label="商品库存" prop="fields.stock.show">
          <div class="flex gap-8px">
            <ColorInput v-model="formData.fields.stock.color" />
            <el-checkbox v-model="formData.fields.stock.show" />
          </div>
        </el-form-item>
      </el-card>
      <el-card header="角标" class="property-group" shadow="never">
        <el-form-item label="角标" prop="badge.show">
          <el-switch v-model="formData.badge.show" />
        </el-form-item>
        <el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
            <template #tip> 建议尺寸：36 * 22 </template>
          </UploadImg>
        </el-form-item>
      </el-card>
      <el-card header="按钮" class="property-group" shadow="never">

        <el-form-item label="是否显示" prop="badge.btnShow">
          <el-switch v-model="formData.btnShow" />
        </el-form-item>
        <el-form-item label="按钮选择" prop="btnType.type" v-if="formData.btnShow">
          <el-radio-group v-model="formData.btnType.type">
            <el-radio-button value="buy">立即购买</el-radio-button>
            <el-radio-button value="cart">加入购物车</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <template v-if="formData.btnType.type === 'buy' && formData.btnShow">
          <el-form-item label="按钮类型" prop="btnBuy.type">
            <el-radio-group v-model="formData.btnBuy.type">
              <el-radio-button value="text">文字</el-radio-button>
              <el-radio-button value="img">图片</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <template v-if="formData.btnBuy.type === 'text'">
            <el-form-item label="按钮文字" prop="btnBuy.text">
              <el-input v-model="formData.btnBuy.text" />
            </el-form-item>
            <el-form-item label="左侧背景" prop="btnBuy.bgBeginColor">
              <ColorInput v-model="formData.btnBuy.bgBeginColor" />
            </el-form-item>
            <el-form-item label="右侧背景" prop="btnBuy.bgEndColor">
              <ColorInput v-model="formData.btnBuy.bgEndColor" />
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="图片" prop="btnBuy.imgUrl">
              <UploadImg v-model="formData.btnBuy.imgUrl" height="56px" width="56px">
                <template #tip> 建议尺寸：56 * 56 </template>
              </UploadImg>
            </el-form-item>
          </template>
        </template>
        <template v-if="formData.btnType.type === 'cart' && formData.btnShow">
          <el-form-item label="按钮类型" prop="btnCart.type">
            <el-radio-group v-model="formData.btnCart.type">
              <el-radio-button value="text">文字</el-radio-button>
              <el-radio-button value="img">图片</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <template v-if="formData.btnCart.type === 'text'">
            <el-form-item label="按钮文字" prop="btnCart.text">
              <el-input v-model="formData.btnCart.text" />
            </el-form-item>
            <el-form-item label="左侧背景" prop="btnCart.bgBeginColor">
              <ColorInput v-model="formData.btnCart.bgBeginColor" />
            </el-form-item>
            <el-form-item label="右侧背景" prop="btnCart.bgEndColor">
              <ColorInput v-model="formData.btnCart.bgEndColor" />
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="图片" prop="btnCart.imgUrl">
              <UploadImg v-model="formData.btnCart.imgUrl" height="56px" width="56px">
                <template #tip> 建议尺寸：56 * 56 </template>
              </UploadImg>
            </el-form-item>
          </template>
        </template>
      </el-card>
      <el-card header="商品样式" class="property-group" shadow="never">
        <el-form-item label="上圆角" prop="borderRadiusTop">
          <el-slider
            v-model="formData.borderRadiusTop"
            :max="100"
            :min="0"
            show-input
            input-size="small"
            :show-input-controls="false"
          />
        </el-form-item>
        <el-form-item label="下圆角" prop="borderRadiusBottom">
          <el-slider
            v-model="formData.borderRadiusBottom"
            :max="100"
            :min="0"
            show-input
            input-size="small"
            :show-input-controls="false"
          />
        </el-form-item>
        <el-form-item label="间隔" prop="space">
          <el-slider
            v-model="formData.space"
            :max="100"
            :min="0"
            show-input
            input-size="small"
            :show-input-controls="false"
          />
        </el-form-item>
      </el-card>
      <el-card header="标题" class="property-group" shadow="never">
        <el-form-item label="标题">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="标题图标">
          <UploadImg v-model="formData.titleIcon" height="50px" width="50px" />
        </el-form-item>
      </el-card>
      <el-card header="更多" class="property-group" shadow="never">
        <el-form-item label="更多图标">
          <UploadImg v-model="formData.moreIcon" height="50px" width="50px" />
        </el-form-item>
        <el-form-item label="更多跳转链接">
          <AppLinkInput v-model="formData.moreLink" placeholder="请输入更多跳转链接" />
        </el-form-item>
      </el-card>
    </el-form>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { ProductCardProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'

// 商品卡片属性面板
defineOptions({ name: 'ProductCardProperty' })

const props = defineProps<{ modelValue: ProductCardProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<style scoped lang="scss"></style>
